<!--
模拟问题页，有修改问题和删除问题的功能键
author：郦洋

问题页中加入举报、评论的功能键和评论、举报的显示区（举报显示区需管理员用户才可看到，此功能在做出用户功能后再实现）
author: 徐哲
-->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'bootstrap-4.1.3-dist/css/bootstrap.min.css' %}">
</head>
<body>
    <!-- bootstrap.js 依赖 jquery.js 和popper.js，因此在这里引入 -->
    <script src="{% static 'jquery/jquery-3.5.0.min.js' %}"></script>
    <script src="{% static 'popper/popper.js' %}"></script>
    <!-- 引入bootstrap的js文件 -->
    <script src="{% static 'bootstrap-4.1.3-dist/js/bootstrap.min.js' %}"></script>
    <!-- 引入layer.js -->
    <script src="{% static 'layer/layer.js' %}"></script>

    <div class="container">
    <div class="row">
        <!-- 标题及作者 -->
        <h1 class="col-12 mt-4 mb-4">{{ question.question_title }}</h1>
        <div class="col-12 alert alert-success">提问者:{{ question.questioner }}
            <br>浏览量：{{ question.page_views }}<br>
            {% if user == question.questioner %}
                <a href="#" onclick="confirm_delete()">删除问题</a>
                <a href="#" onclick="confirm_update()">修改问题</a>
            {% endif %}
        </div>
        <!-- 文章正文 -->
        <div class="col-12">
            <p>{{ question.question_text | safe }}</p>
        </div>

        <!-- 给问题点赞 -->
        <hr>
            <div>
                <form
                action="{% url 'qas_system:question_good' question.id %}"
                method="POST"
                >
                    {% csrf_token %}
                        <!-- 点赞按钮 -->
                        <button type="submit" class="btn btn-primary ">赞</button>
                </form>
            </div>
            <br>

        <!-- 显示问题赞的数量 -->
        <h4>{{ question.good_num }}人觉得很赞</h4>

        <!-- 发表评论 -->
        <hr>
            <div>
                <form
                action="{% url 'qas_system:question_comment' question.id %}"
                method="POST"
                >
                    {% csrf_token %}
                        <div class="form-group">
                            <label for="comment_text">
                                <strong>
                                    我也要发言：
                                </strong>
                            </label>
                            <textarea
                                type="text"
                                class="form-control"
                                id="comment_text"
                                name="comment_text"
                                rows="2"></textarea>
                        </div>
                        <!-- 提交按钮 -->
                        <button type="submit" class="btn btn-primary ">发送</button>
                </form>
            </div>
            <br>


        <!-- 显示评论 -->
        <h4>共有{{ comments.count }}条评论</h4>
        <div>
            {% for comment in comments %}
                <hr>
                <p>
                {% if comment.comment_person.avatar %}
                    <img width="80" height="80" src="{{ comment.comment_person.avatar.url }}" class="img-circle"/>
                {% else %}
                    <img width="80" height="80" src="/media/avatar/default0.jpg" class="img-circle"/>
                {% endif %}
                    <span style="color: green">
                        {{ comment.pub_date|date:"Y-m-d H:i:s" }}<br>
                        {{ comment.comment_person }}
                    </span> ：
                </p>
                <pre style="font-family: inherit; font-size: 1em;">
{{ comment.comment_text }}</pre>
            {% endfor %}
        </div>

        <!-- 进行举报 -->
        <hr>
            <div>
                <form
                action="{% url 'qas_system:question_tipoff' question.id %}"
                method="POST"
                >
                    {% csrf_token %}
                        <div class="form-group">
                            <label for="reason">
                                <strong>
                                    想举报这篇文章？请写下理由：
                                </strong>
                            </label>
                            <textarea
                                type="text"
                                class="form-control"
                                id="reason"
                                name="reason"
                                rows="2"></textarea>
                        </div>
                        <!-- 提交按钮 -->
                        <button type="submit" class="btn btn-primary ">确认举报</button>
                </form>
            </div>
            <br>

        <!-- 显示被举报次数 -->
        <h4>共被举报{{ tipoffs.count }}次</h4>

    </div>
    </div>

    <script>
    // 删除文章的函数
    function confirm_delete() {
        // 调用layer弹窗组件
        layer.open({
            // 弹窗标题
            title: "确认删除",
            // 正文
            content: "确认删除这个问题吗？",
            // 点击确定按钮后调用的回调函数
            yes: function(index, layero) {
                // 指定应当前往的 url
                location.href="/qas_system/question-delete/{{ question.id }}"
            },
        })
    }
    </script>

    <script>
    // 删除文章的函数
    function confirm_update() {
        // 调用layer弹窗组件
        layer.open({
            // 弹窗标题
            title: "确认修改",
            // 正文
            content: "确认要对该问题进行修改吗？",
            // 点击确定按钮后调用的回调函数
            yes: function(index, layero) {
                // 指定应当前往的 url
                location.href="/qas_system/updateq/{{ question.id }}"
            },
        })
    }
    </script>

</body>
</html>